<template>
  <div class="data-board">
    <h2>消费分析看板</h2>
    <div class="charts">
      <div class="ring-chart">
        <div class="chart-title">消费占比</div>
        <!-- 环形图占位，可后续引入图表库 -->
        <div class="ring-placeholder">🍬🍪📚</div>
      </div>
      <div class="scene-3d">
        <div class="chart-title">动态场景</div>
        <div class="scene-placeholder">3D 零食山</div>
      </div>
    </div>
    <div class="saving-growth">
      <div class="growth-title">储蓄成长体系</div>
      <div class="box-upgrade">
        <span>木箱 → 铁盒 → 金库</span>
        <div class="upgrade-placeholder">升级前后对比动画</div>
      </div>
      <div class="milestone">
        <span>存款里程碑</span>
        <div class="milestone-placeholder">🎆 烟花特效</div>
      </div>
    </div>
    <router-link to="/" class="back-btn">返回首页</router-link>
  </div>
</template>

<script setup lang="ts">
// 这里可后续引入图表与动画逻辑
</script>

<style scoped>
.data-board {
  background: #F9F9F9;
  min-height: 100vh;
  padding: 32px 0 40px 0;
  text-align: center;
}
.charts {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.ring-chart, .scene-3d {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px #eee;
  width: 220px;
  min-height: 180px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-title {
  font-size: 16px;
  color: #888;
  margin-bottom: 8px;
}
.ring-placeholder, .scene-placeholder {
  font-size: 32px;
  color: #bbb;
  margin-top: 24px;
}
.saving-growth {
  margin: 32px 0 0 0;
}
.growth-title {
  font-size: 18px;
  color: #6CC417;
  margin-bottom: 8px;
}
.box-upgrade, .milestone {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px #eee;
  margin: 12px auto;
  padding: 12px 0;
  width: 80vw;
  max-width: 320px;
}
.upgrade-placeholder, .milestone-placeholder {
  font-size: 18px;
  color: #FF6B6B;
  margin-top: 8px;
}
.back-btn {
  display: inline-block;
  margin-top: 32px;
  background: #6CC417;
  color: #fff;
  border-radius: 24px;
  padding: 12px 32px;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 2px 8px #cdebb0;
  transition: background 0.2s;
}
.back-btn:active {
  background: #4e9e13;
}
</style>